<template>
    <view class="page">
		<view class="g-notice-nav">
			<block v-for="(item,index) in typeData" :key="index">
				<navigator open-type="navigate" :url="item.url" class="flex" hover-class="none">
					<image class="icon" :src="item.img"></image>
					<view class="info flex"><view class="text">{{item.name}}</view></view>
				</navigator>
			</block>
		</view>
		<view class="g-notice-list" v-if="data.length>0">
			<view class="g-notice-hd">
				<image src="../../static/icons/notice_new.png" mode="widthFix"></image>
				<text>最新信息</text>
			</view>
			<view class="g-notice-item" v-for="(item, index) in data" :key="index" @tap="goUrl(item.url)">
				<view class="g-notice-icon">
					<image src="../../static/icons/notice.png" mode="widthFix"></image>
				</view>
				<view class="g-notice-text f-border1px">
					<view class="g-notice-title">
						<text>{{item.type_text}}</text>
						<text>{{item.create_time}}</text>
					</view>
					<view class="info">{{item.content}}</view>
				</view>
			</view>
		</view>
		<view class="m-loading" v-if="showLoading">
			<image src="../../static/images/loading.gif" mode="widthFix"></image>
			<text>加载中</text>
		</view>
		<view class="m-no-data" v-if="showNodata"><image src="../../static/images/no_data.png" mode="widthFix"></image></view>
    </view>
</template>

<script>
	import henglang from '@/common/common.js';
    export default {
        data() {
            return {
                data: [],
                page: 1,
                showLoading: false,
                showNodata: false,
				totalPages: 1,
                typeData:[]
            };
        },
        methods: {
			goUrl(e) {
				if(e){
					uni.navigateTo({
						url:e
					})
				}
			},
            request(type) {
                let that = this;
            	that.showLoading = true;
            	if(!henglang.checkLogin()){
            		that.showNodata = true;
            		that.showLoading = false;
            		return
            	}
            	if(that.page <= that.totalPages){
            		henglang.get('member/getMessageIndex',{page: that.page},true,function(res){
            			that.showLoading = false;
            			if (!res.data.data.length) {
            				that.showNodata = true;
            				return false;
            			}
            			if (type == 'plus') {
            				that.data = that.data.concat(res.data.data);
            			} else {
            				that.data = res.data.data;
            				that.totalPages = res.data.total_pages;
            			}
            		});
            	}else{
            		that.showLoading = false;
            	}
            }
        },
		onLoad() {
			let that = this
			henglang.get('member/message_type_new',{},true,function(res){
				that.typeData = res.data.data
			})
			that.request();
			// #ifdef APP-PLUS
			plus.runtime.setBadgeNumber(0);
			// #endif
        },
		onReachBottom() {
			this.page += 1;
			this.request('plus');
		}
	}
</script>

<style>
    .page {
        background: #fafafa;
        min-height: 100vh;
    }

    .g-notice-list {
        padding-left: 20upx;
        box-sizing: border-box;
        background: #fff;
        border-bottom: 20upx solid #f2f2f2;
        margin-top: 20upx;
    }
    
    .g-notice-list .g-notice-item:last-child .g-notice-text::after {
        display: none;
    }
    
    .g-notice-hd {
        padding-top: 20upx;
        display: flex;
        align-items: center;
        color: #828080;
    }
    
    .g-notice-hd image {
        width: 34rpx;
    	height: 34rpx;
    	margin: 0 14rpx;
    }
    
    .g-notice-item {
        display: flex;
        align-items: center;
    }
    
    .g-notice-icon {
        width: 90upx;
        height: 90upx;
        background: #fe413f;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 20upx;
        border-radius: 100px;
    }
    
    .g-notice-icon image {
        width: 60upx;
    }
    
    .g-notice-text {
        padding: 40upx 0;
        color: #ccc;
        position: relative;
        flex: 1;
        max-width: 85%;
    }
    
    .g-notice-title {
        display: flex;
        justify-content: space-between;
        padding-right: 20upx;
    }
    
    .g-notice-title:first-child {
        color: #000;
        font-size: 32upx;
    }
    
    .g-notice-text .info {
        color: #828080;
    }
    
    .g-notice-text::after {
        border-bottom: 1px solid #ccc;
    }
		
	.g-notice-nav{
		background: #FFFFFF;
		margin-top: 20rpx;
		padding: 0 28rpx 1px 35rpx;
	}
	.g-notice-nav .flex{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.g-notice-nav .icon{
		width: 106rpx;
		height: 106rpx;
	}
	.g-notice-nav navigator{
		height: 170rpx;
		line-height: 170rpx;
	}
	.g-notice-nav .info{
		border-bottom: 1px solid #e5e5e5;
		width: 560rpx;
	}
	.g-notice-nav .info .text{
		color: #000000;
		font-size: 34rpx;
	}
	.g-notice-nav .info .num{
		color: #7f7f7f;
		font-size: 28rpx;
	}
	.g-notice-nav{
		background: #FFFFFF;
		margin-top: 20rpx;
		padding: 0 28rpx 1px 35rpx;
	}
	.g-notice-nav .flex{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.g-notice-nav .icon{
		width: 106rpx;
		height: 106rpx;
	}
	.g-notice-nav navigator{
		height: 170rpx;
		line-height: 170rpx;
	}
	.g-notice-nav .info{
		border-bottom: 1px solid #e5e5e5;
		width: 560rpx;
	}
	.g-notice-nav .info .text{
		color: #000000;
		font-size: 34rpx;
	}
	.g-notice-nav .info .num{
		color: #7f7f7f;
		font-size: 28rpx;
	}
</style>
